import React from 'react';
import { inject, observer} from 'mobx-react';
import {Spin,Table,Button,Modal,Tooltip,Row, Col } from 'antd';
import { WeaNewScroll,WeaLeftRightLayout,WeaInputNumber,WeaOrgTree,WeaCheckbox,WeaTools,WeaTop,WeaSearchGroup,WeaFormItem,WeaBrowser,WeaDateGroup,WeaInput,WeaSelect,WeaRightMenu,WeaDialog} from 'ecCom';
@observer
export default class PlanBase extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        menu :[
        {
          key: '0',
          icon: <i className='icon-coms-search' />,
          content: '保存',
          onClick: key => {},
        },
        {
          key: '1',
          icon: <i className='icon-coms-export' />,
          content: '应用到下级分部',
          onClick: key => {},
        }
        ],
        _height:this.getHeight(),
        heightInit:false,
        columns:[
          {title: '类型',dataIndex: 'cate',width:'10%',
          render:(text, record, index) => <div title={text} className="noWrap">{text}</div>
          },
          {title: '开始时间',dataIndex: 'beginDate', width:'40%',
          render:(text, record, index) => <div title={text} className="noWrap">{text}</div>
          },
          {title: '截止时间',dataIndex: 'endDate',width:'40%',
          render:(text, record, index) =><div title={text} className="noWrap">{text}</div>
          },
          {title: '是否提醒',dataIndex: 'remind',width:'10%',
          render:(text, record, index) =><div title={text} className="noWrap">{text}</div>
          }
        ],
        datalist:[
          {"cate":"周报","beginDate":<div>结束<WeaSelect
          options={[{
            key: "1",
            showname: "前"
          },
          {
            key: "2",
            showname: "后"
          }]}
          value={"1"}
          viewAttr={2}
          style={{display:"inline-block",width:50,margin:"0 5px"}}
          onChange={(v, showname) => {
            console.log("v", v, "showname:", showname);
          }}
        /><WeaInputNumber  style={{display:"inline-block",width:80}} value = {0} />天</div>,
        "remind":<WeaCheckbox value={'1'} display="switch" id='weekremind' style={{display: 'inline-block'}} />,
        "endDate":<div>结束<WeaSelect
        options={[{
          key: "1",
          showname: "前"
        },
        {
          key: "2",
          showname: "后"
        }]}
        value={"1"}
        viewAttr={2}
        style={{display:"inline-block",width:50,margin:"0 5px"}}
        onChange={(v, showname) => {
          console.log("v", v, "showname:", showname);
        }}
      /><WeaInputNumber  style={{display:"inline-block",width:80}} value = {0} />天</div>
      }
        ]
      }
    }
    componentWillMount() {//一些初始化请求
      
    }
    getHeight(header){
      let h = 0;
      if(header){
          h = header.clientHeight || 0;
      }
      return window.innerHeight-h;
    }
    render() {
      const{menu,_height,datalist,columns} = this.state;
      let header = document.getElementsByClassName("e9theme-layout-header")[0];
      if(header && !heightInit){
          this.setState({_height:this.getHeight(header),heightInit:true});
      }
      return (
        <div className="wea-workrelate-plan-base" style={{height:_height}}>
        <WeaRightMenu datas={menu} showUrlItem={false} style={{height:'100%'}}>
            <WeaTop
              title="集团计划报告基础设置"
              icon={<i className='icon-coms-ModelingEngine-o' />}
              iconBgcolor='rgb(150, 53, 138)'
              buttons = {[(<Button type='primary' onClick={()=>console.log(2)}>保存</Button>)]}
              showDropIcon={true}
              dropMenuDatas = {menu}
            />
              <WeaLeftRightLayout
                    leftCom={<WeaNewScroll height={_height-80}><WeaOrgTree treeNodeClick={()=>{}} needSearch={true} isLoadSubDepartment={true}/></WeaNewScroll>}
                    leftWidth={180}
                    onCollapse={showLeft =>{}}>
                    <div>
                    <WeaNewScroll height={_height-80}>
                      <WeaSearchGroup title='报告起止日期' showGroup={true}>
                          <WeaFormItem
                                    label="启用报告周期"
                                    labelCol={{ span: 3 }}
                                    wrapperCol={{ span: 20 }}>
                            <WeaCheckbox value={'1'} display="switch" id='week' style={{display: 'inline-block'}} />周报
                            <WeaCheckbox value={'0'} display="switch" id='month' style={{display: 'inline-block',marginLeft:"10px"}} />月报
                          </WeaFormItem>
                          <WeaFormItem
                                    label=""
                                    labelCol={{ span: 0 }}
                                    wrapperCol={{ span: 24 }}>
                            <Table columns={columns} bordered={true} scroll={{y: 100}} dataSource={datalist} pagination={false}/>
                          </WeaFormItem>
                      </WeaSearchGroup>
                      <WeaSearchGroup title='其他信息' showGroup={true}>
                         <Row gutter="2" style={{margin:"5px 10px 0 10px"}}>
                            <Col span={4}>报告模版制定人</Col>
                            <Col span={7}><WeaBrowser  type={1} inputStyle={{width:150}} onChange={(ids, names, datas) => {}}/></Col>
                            <Col span={4}>报告审批人</Col>
                            <Col span={9}><WeaBrowser  type={1} inputStyle={{width:150}} onChange={(ids, names, datas) => {}}/>
                            <WeaCheckbox value={'0'} id='sp' style={{display: 'inline-block',verticalAlign:"super",marginLeft:"10px"}} content='直接上级审批'/>
                            </Col>
                         </Row>
                         <Row gutter="2" style={{margin:"5px 10px 0 10px"}}>
                            <Col span={4}>报告结果查看人</Col>
                            <Col span={7}><WeaBrowser  type={1} inputStyle={{width:150}} onChange={(ids, names, datas) => {}}/></Col>
                            <Col span={4}>附件上传目录</Col>
                            <Col span={7}><WeaBrowser  type={"doccategory"} inputStyle={{width:150}} onChange={(ids, names, datas) => {}}/></Col>
                         </Row>
                         <Row gutter="2" style={{margin:"5px 10px 0 10px"}}>
                            <Col span={4}>上级定义方案</Col>
                            <Col span={7}><WeaCheckbox value={'1'} display="switch" id='f1' style={{display: 'inline-block'}} /></Col>
                            <Col span={4}>个人定义方案</Col>
                            <Col span={7}><WeaCheckbox value={'1'} display="switch" id='f2' style={{display: 'inline-block'}} /></Col>
                         </Row>
                         <Row gutter="2" style={{margin:"5px 10px 0 10px"}}>
                            <Col span={4}>应用到其他分部</Col>
                            <Col span={18}><WeaBrowser  type={194} inputStyle={{width:150}} onChange={(ids, names, datas) => {}} isSingle={false}/></Col>
                         </Row>
                      </WeaSearchGroup>
                    </WeaNewScroll>
                    </div>
                </WeaLeftRightLayout>
          </WeaRightMenu>
        </div>
    )
  }
};